<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>二次贝尔塞斯曲线</title>
</head>
<body>
<img src="https://mdn.mozillademos.org/files/223/Canvas_curves.png"/>
<canvas id="canvas"></canvas>
<p></p>
<img src="">
<script>
    function draw() {
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            var width = canvas.width;
            var height = canvas.height;

            // 二次贝塞尔曲线
            ctx.beginPath();
            ctx.moveTo(width/2,25);
            // ctx.quadraticCurveTo(25,25,25,62.5);
            // ctx.quadraticCurveTo(25,100,50,100);
            // ctx.quadraticCurveTo(50,120,30,125);
            // ctx.quadraticCurveTo(60,120,65,100);
            // ctx.quadraticCurveTo(125,100,125,62.5);
            // ctx.quadraticCurveTo(125,25,75,25);
            // ctx.stroke();

            ctx.quadraticCurveTo(0,0,0,55);
            ctx.quadraticCurveTo(0,height,width/2,height);
            ctx.moveTo(width/2,25);
            ctx.quadraticCurveTo(width,0,width,55);
            ctx.quadraticCurveTo(width,height,width/2,height);

            ctx.stroke();
        }
    }

    draw();
</script>
</body>
</html>